import React, { useState, useEffect } from 'react'
import { CSVLink } from 'react-csv'
import db from '../../util/db'
import NumerKeyBoard from '../../component/NumberKeyBoard'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from '../../redux/slices/counterSlice'
import { addMoney, getRequest, changeAsync, } from '../../redux/slices/userSlice'
import Test2 from './Test2'
export default function Test() {
    const [allData, setALlData] = useState([]);
    const dispatch = useDispatch()
    const [total, setTotal] = useState('');
    const counterValue = useSelector(state => state.counter.countValue)

    const { name, money, async, game } = useSelector(state => state.userInfo)

    // const csvHeader = [
    //     { label: 'First Name', key: 'firstname' },
    //     { label: 'Last Name', key: 'lastname' },
    //     { label: 'Email', key: 'email' },
    // ];
    // const csvData = [
    //     { firstname: 'Ahmed', lastname: 'Tomi', email: 'ah@smthing.co.com' },
    //     { firstname: 'Raed', lastname: 'Labes', email: 'rl@smthing.co.com' },
    //     { firstname: 'Yezzi', lastname: 'Min l3b', email: 'ymin@cocococo.com' },
    // ];
    const csvHeader = [
        { label: '类型', key: 'type' },
        { label: '详情', key: 'detailType' },
        { label: '金额', key: 'money' },
        { label: '日期', key: 'time' },
    ]
    useEffect(() => {
        console.warn('start-异步请求');
        dispatch(getRequest())
        console.warn('ovoer-异步请求');
        db.qryAllData(ret => {
            console.log(`test all data:${JSON.stringify(ret)}`);
            setALlData(ret)
        })
    }, [])
    return (
        <>
            <div>
                user:
                {name}
            </div>

            <div onClick={() => { dispatch(addMoney()) }}>
                money:
                {money}
            </div>

            <div>
                counterValue:
                {counterValue}
            </div>
            <hr />
            <Test2></Test2>
            <hr />

            <div onClick={() => {
                dispatch(changeAsync())
            }}>
                changeAsync:{String(async)}
            </div>
            <br />
            <hr />
            <div>game:{JSON.stringify(game)}</div>
            <hr />
            <CSVLink data={allData} headers={csvHeader}>
                Download me
            </CSVLink>
        </>

    )
}